<script setup lang='ts'>
import { ref, onMounted } from "vue"
import Menu from "../menu/test.vue"
//引入路由
import { useRouter } from "vue-router";

//获取路由器对象
let router = useRouter();
//接收路由数组
defineProps({
  menuList: Object,
})

const goRouter = (item: any) => {
  //路由跳转
  router.push(item.index)
}
</script>

<template>
  <div class="menu-container">


    <template v-for="(item, index) in menuList">
      <template v-if="!(item.meta as any).hidden">
        <!--  无子路由  -->
        <el-menu-item :index="item.path" v-if="!item.children" @click="goRouter">
          <el-icon>
            <component :is="(item.meta as any).icon">
            </component>
          </el-icon>
          <template #title>
            <span>{{ (item.meta as any).title }}</span>
          </template>
        </el-menu-item>
        <!--  仅一个子路由  -->
        <el-menu-item :index="item.path" v-if="item.children && item.children.length == 1" @click="goRouter">
          <el-icon>
            <component :is="(item.children[0].meta as any).icon">
            </component>
          </el-icon>
          <template #title>
            <span>{{ (item.children[0].meta as any).title }}</span>
          </template>
        </el-menu-item>
        <!--  一子路由以上  -->
        <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.children[0].path">
          <template #title>
            <el-icon>
              <component :is="(item.meta as any).icon">
              </component>
            </el-icon>
            <span>{{ (item.meta as any).title }}</span>
          </template>
          <Menu :menuList="item.children"></Menu>
        </el-sub-menu>
      </template>
    </template>

  </div>
</template>



<style lang="less" scoped></style>